<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>1.直接获取2005端口下的资源</h1>
    <input type="button" value="获取数据" id="btn1" />

    <h1>2.jsonp方式获取2005端口下的资源</h1>
    <input type="button" value="jsonp获取数据" id="btn2" />

    <h1>3.cors方式获取2005端口下的资源</h1>
    <input type="button" value="cors获取数据" id="btn3" />

    <h1>4.服务器代理方式获取微博接口下的资源</h1>
    <input type="button" value="服务器代理获取数据" id="btn4" />

    <h1>4.服务器代理方式获取node社区下的资源</h1>
    <input type="button" value="服务器代理获取数据" id="btn5" />

    <h1>5.服务器代理方式获取58同城下的资源</h1>
    <input type="button" value="服务器代理获取数据" id="btn6" />

    <!-- 五十块钱的百度 -->
    <!-- <iframe
      src="https://www.baidu.com/"
      frameborder="0"
      width="100%"
      height="600px"
    ></iframe> -->
  </body>
  <script src="./js/jquery.min.js"></script>

  <script>
    //没有做跨域：No 'Access-Control-Allow-Origin' header
    $("#btn1").click(() => {
      $.ajax({
        url: "http://localhost:2005/data.json",
        type: "get",
        success: (res) => {
          console.log(res, 999);
        },
      });
    });

    //jsonp跨域:jsonp不是ajax请求
    $("#btn2").click(() => {
      $.ajax({
        url: "http://localhost:2005/jsonp",
        type: "get",
        jsonp: "callback", //callback 或 cb 用于后端设置函数名
        dataType: "jsonp",
        success: (res) => {
          console.log(res, 999);
        },
      });
    });

    //cors跨域：ajax请求
    $("#btn3").click(() => {
      $.ajax({
        url: "http://localhost:2005/cors",
        type: "get",
        dataType: "json",
        success: (res) => {
          console.log(res, 999);
        },
      });
    });

    //服务器代理 ：https://m.weibo.cn/api/config/list
    //微博接口代理：
    $("#btn4").click(() => {
      $.ajax({
        url: "/sinaapi/api/config/list", //http://localhost:3001/
        type: "get",
        dataType: "json",
        success: (res) => {
          console.log(res, 999);
        },
      });
    });

    //nodejs社区接口代理：  /api/v1/topics
    $("#btn5").click(() => {
      $.ajax({
        url: "/nodeapi/api/v1/topics", //http://localhost:3001/
        type: "get",
        dataType: "json",
        success: (res) => {
          console.log(res, 999);
        },
      });
    });

    //58同城接口代理： /common/catelist/?cateid=60532
    $("#btn6").click(() => {
      $.ajax({
        url: "/apidata/common/catelist/?cateid=60532", //http://localhost:3001/
        type: "get",
        dataType: "json",
        success: (res) => {
          console.log(res, 999);
        },
      });
    });

    //函数的声明:必须是全局函数
    // function getdata(data) {
    //   //形参
    //   console.log(data);
    // }

    // getdata("123"); //实参
  </script>
  <!-- getdata('123') -->
  <!-- <script src="http://localhost:2005/jsonp?callback=getdata"></script> -->
</html>
